<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入font-awesome -->
		<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	</head>
	<body>
		
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<h1>Hello jQuery!</h1>
					
					<!-- 
					data-slide-to="2"
					 data-slide="prev"
					 -->
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					  </ol>
					
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner" role="listbox">
					    <div class="item active">
					      <img src="images/pic1.png" alt="...">
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					    <div class="item">
					      <img src="images/pic2.webp" alt="...">
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					    <div class="item">
					      <img src="images/pic3.webp" alt="...">
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					  </div>
					
					  <!-- Controls -->
					  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					    <span class="sr-only">Next</span>
					  </a>
					</div>
					
					<hr>
					
					<!-- Button trigger modal -->
					<button 
						type="button" 
						class="btn btn-primary btn-lg" 
						data-toggle="modal" 
						data-target="#myModal"
					>
					  Launch demo modal
					</button>
					
					<button class="btn btn-danger my-btn">展示Modal</button>
					
					<!-- Modal -->
					<div class="modal fade" id="myModal1">
					  <!-- <div class="modal-dialog" role="document"> -->
					  <!-- <div class="modal-dialog modal-lg" role="document"> -->
					  <div class="modal-dialog modal-sm" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal">&times;</button>
					        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
					      </div>
					      <div class="modal-body">
					        ...
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					        <button type="button" class="btn btn-primary close-modal">Save changes</button>
					      </div>
					    </div>
					  </div>
					</div>
					
					<hr>
					<div class="btn-group" role="group" aria-label="">
					  <button type="button" class="btn btn-default">Left</button>
					  <button type="button" class="btn btn-default">Middle</button>
					  <button type="button" class="btn btn-default">Right</button>
					</div>
					<!-- Single button -->
					<div class="btn-group">
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					    Action <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
					  </ul>
					</div>
					
					<div class="dropdown">
					  <button id="dLabel" type="button" data-toggle="dropdown">
					    Dropdown trigger
					    <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu" aria-labelledby="dLabel">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
					  </ul>
					</div>
					<div class="dropdown">
					  <span class="d" data-toggle="dropdown">123</span>
					  <ul class="dropdown-menu" aria-labelledby="dLabel">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
					  </ul>
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- 
		 bootstrap.css 提供样式库（包含公共样式，组件样式，插件样式）
		 bootstrap.js 为组件，插件提供交互逻辑，必须依赖于jQuery
		 -->
		
		<script src="lib/jquery-3.5.1.js"></script>
		<!-- 某些bootstrap的组件以来js -->
		<!-- bootstrap.js必须依赖于jQuery，v5不需要 -->
		<script src="lib/bootstrap/js/bootstrap.js"></script>
		<script>
			
			$(function() {
				// $('.carousel').carousel({interval: 1000,})
				
				
				
				
				$(".my-btn").on("click", function() {
					// console.log(this)
					// $('#myModal1').modal('toggle')
					// $('#myModal1').modal('show')
					// $('.carousel').carousel("prev")
					// $('.carousel').carousel("next")
					$('.carousel').carousel("pause")
				})
				$(".close-modal").on("click", function() {
					$('#myModal1').modal('hide')
				})
				
				$("#myModal1").on("show.bs.modal", function() {
					console.log("show 方法调用之后立即触发该事件")
				})
				
			})
			
		</script>
	</body>
</html>